<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber" style="height:100vh">
				<form @submit="applySubmit" reportSubmit="true" v-if="data.is_form_show">
					<view class="form-group-name">基本信息</view>
					<view class="input-group-list">
						<view class="flex flex-row input-group">
							<view class="flex-grow-0 flex-y-center input-group-label">联系人</view>
							<view class="flex-grow-1">
								<input class="flex-y-center" name="realname" placeholder="必填" placeholderClass="placeholder" :value="data.apply?data.apply.realname:''"></input>
							</view>
						</view>
						<view class="flex flex-row input-group">
							<view class="flex-grow-0 flex-y-center input-group-label">联系电话</view>
							<view class="flex-grow-1">
								<input class="flex-y-center" name="tel" placeholder="必填" placeholderClass="placeholder" :value="data.apply?data.apply.tel:''"></input>
							</view>
						</view>
						<view class="flex flex-row input-group" v-if="data.__platform=='wx'">
							<view class="flex-grow-0 flex-y-center input-group-label">微信号</view>
							<view class="flex-grow-1">
								<input class="flex-y-center" name="wechat_name" placeholder="" placeholderClass="placeholder" :value="data.apply?data.apply.wechat_name:''"></input>
							</view>
						</view>
					</view>
					<view class="form-group-name">店铺信息</view>
					<view class="input-group-list" style="margin-bottom: 32upx">
						<view class="flex flex-row input-group">
							<view class="flex-grow-0 flex-y-center input-group-label">店铺名称</view>
							<view class="flex-grow-1">
								<input class="flex-y-center" name="name" placeholder="必填" placeholderClass="placeholder" :value="data.apply?data.apply.name:''"></input>
							</view>
						</view>
						<view class="flex flex-row input-group" v-if="data.edit_district!=undefined">
							<view class="flex-grow-0 flex-y-center input-group-label">所在地区</view>
							<view class="flex-grow-1">
								<view @click="showAreaPicker" class="flex flex-row" style="height: 100%;padding: 0 32upx">
									<view class="flex-grow-1 flex-y-center">
										<view v-if="!data.edit_district.province">请选择地区</view>
										<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis" v-else>
											{{data.edit_district.province.name}}{{data.edit_district.city.name}}{{data.edit_district.district.name}}
										</view>
									</view>
									<view class="flex-grow-0 flex-y-center">
										<image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx"></image>
									</view>
								</view>
								<view style="display: none">
									<input name="province_id" type="hidden" :value="data.edit_district.province.id"></input>
									<input name="city_id" type="hidden" :value="data.edit_district.city.id"></input>
									<input name="district_id" type="hidden" :value="data.edit_district.district.id"></input>
								</view>
							</view>
						</view>
						<view class="flex flex-row input-group">
							<view class="flex-grow-0 flex-y-center input-group-label">详细地址</view>
							<view class="flex-grow-1">
								<input class="flex-y-center" name="address" placeholder="必填" placeholderClass="placeholder" :value="data.apply?data.apply.address:''"></input>
							</view>
						</view>
						<view>
							<picker @change="storeCommonCatChange" class="" name="store_common_cat_id" :range="data.store_common_cat_list"
							 rangeKey="name" style="position: relative" value="">
								<view class="flex flex-row input-group">
									<view class="flex-grow-0 flex-y-center input-group-label">所售类目</view>
									<view class="flex-grow-1">
										<view class="flex flex-row" style="height: 100%;padding: 0 32upx">
											<view class="flex-grow-1 flex-y-center" v-if="data.store_common_cat_list[data.store_common_cat_index]">{{data.store_common_cat_list[data.store_common_cat_index].name}}
											</view>
											<view class="flex-grow-1 flex-y-center" v-else>
												<view v-if="data.apply&&data.apply.store_common_cat_id">{{data.apply.store_common_cat_name}}</view>
												<view v-else>请选择类目</view>
											</view>
											<view class="flex-grow-0 flex-y-center">
												<image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx"></image>
											</view>
										</view>
									</view>
								</view>
							</picker>
						</view>
						<view class="flex flex-row input-group">
							<view class="flex-grow-0 flex-y-center input-group-label">客服电话</view>
							<view class="flex-grow-1">
								<input class="flex-y-center" name="service_tel" placeholder="必填" placeholderClass="placeholder" :value="data.apply?data.apply.service_tel:''"></input>
							</view>
						</view>
					</view>
					<view class="flex flex-row" style="padding: 0 32upx;margin-bottom: 32upx" v-if="data.entry_rules">
						<view @click="disagreeEntryRules" class="flex flex-row" v-if="data.agree_entry_rules">
							<view class="flex-y-center">
								<image src="../../static/store/icon-check-on.png" style="width: 32upx;height: 32upx;margin-right: 16upx;"></image>
							</view>
							<view>我已阅读并同意</view>
						</view>
						<view @click="agreeEntryRules" class="flex flex-row" v-else>
							<view class="flex-y-center">
								<image src="../../static/store/icon-check-off.png" style="width: 32upx;height: 32upx;margin-right: 16upx;"></image>
							</view>
							<view>我已阅读并同意</view>
						</view>
						<view @click="showEntryRules" style="color: #5292ed">《入驻协议》</view>
					</view>
					<block v-if="data.apply">
						<button class="submit-btn" formType="submit" style="margin-bottom: 32upx;margin-top: 0" v-if="data.apply.review_status==2">重新提交
						</button>
						<button @click="showApplyResult" class="block-button view-data-btn" style="margin-top: 32upx">查看审核结果
						</button>
					</block>
					<button class="submit-btn" formType="submit" style="margin-top: 0" v-else>提交</button>
					<view style="text-align: center;padding: 24upx">
						<navigator openType="redirect" style="padding: 12upx;color: #888" url="/pages/index/index">返回首页</navigator>
					</view>
				</form>
				<view class="apply-result" :class="[data.show_result?'show':'']" v-if="data.apply">
					<image src="../../static/store/img-shenhe-0.png" style="width: 380upx;height: 270upx;margin-bottom: 72upx" v-if="data.apply.review_status==0"></image>
					<image src="../../static/store/img-shenhe-1.png" style="width: 380upx;height: 270upx;margin-bottom: 72upx" v-if="data.apply.review_status==2"></image>
					<image src="../../static/store/img-shenhe-2.png" style="width: 380upx;height: 270upx;margin-bottom: 72upx" v-if="data.apply.review_status==1"></image>
					<view class="review-status " :class="'status-'+data.apply.review_status">{{data.apply.review_status_text}}</view>
					<view class="review-result" v-if="data.apply.review_status==0">您的信息已提交，请耐心等待审核。</view>
					<view class="review-result" v-else>{{data.apply.review_result}}</view>
					<button @click="hideApplyResult" class="submit-btn" v-if="data.apply.review_status==2">重新提交</button>
					<block v-else>
						<button @click="hideApplyResult" class="block-button view-data-btn" style="border:0upx solid #ffffff" v-if="data.apply.review_status==0||data.apply.review_status==1">查看提交内容
						</button>
					</block>
				</view>
				<view class="entry-rules" v-if="data.show_entry_rules">
					<view class="rules-container">
						<view style="padding: 24upx">
							<scroll-view scrollY="true" style="max-height: 75vh">
								<text style="word-break: break-all">{{data.entry_rules}}</text>
							</scroll-view>
						</view>
						<view class="flex flex-row">
							<view @click="disagreeEntryRules" class="flex-grow-1 rules-btn" style="color: #888">拒绝</view>
							<view @click="agreeEntryRules" class="flex-grow-1 rules-btn" style="color: #ff4544">同意</view>
						</view>
					</view>
				</view>
			</view>
				<area-picker v-bind="{data:data}" @hideAreaPicker="hideAreaPicker" @areaPickerConfirm="areaPickerConfirm" @areaPickerChange="areaPickerChange"></area-picker>

		</view>

	</view>
</template>

<script>var myVue = {};
//#ifndef H5
var Vue = require('vue')
//#endif
//#ifdef H5
var Vue = require('vue').default
//#endif
	import areaPicker from '../../components/area-picker/area-picker.vue'
	var area_picker = require("./../../components/area-picker/area-picker.js"), app = Vue.prototype.getApp, api = Vue.prototype.getApp.api;
	export default {
		components:{
			areaPicker
		},
		data() {
			return {
				data: {
					is_form_show: !1,
				}
			}
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e);
        var t = this;
        t.getDistrictData(function(e) {
            area_picker.init({
                page: t,
                data: e
            });
        }), myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.store.apply,
            success: function(e) {
                myVue.getApp.core.hideLoading(), 0 == e.code && (e.data.apply && (e.data.show_result = !0), 
                t.setData(e.data), e.data.apply || t.setData({
                    is_form_show: !0
                }));
            }
        });
    },
		onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
    },
    onHide: function() {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function() {},
    onReachBottom: function() {},
		methods: {
			getDistrictData: function(t) {
        var a = myVue.getApp.core.getStorageSync(myVue.getApp.const.DISTRICT);
        if (!a) return myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), void myVue.getApp.request({
            url: myVue.getApp.api.default.district,
            success: function(e) {
                myVue.getApp.core.hideLoading(), 0 == e.code && (a = e.data, myVue.getApp.core.setStorageSync(myVue.getApp.const.DISTRICT, a), 
                t(a));
            }
        });
        t(a);
    },
    onAreaPickerConfirm: function(e) {
        this.setData({
            edit_district: {
                province: {
                    id: e[0].id,
                    name: e[0].name
                },
                city: {
                    id: e[1].id,
                    name: e[1].name
                },
                district: {
                    id: e[2].id,
                    name: e[2].name
                }
            }
        });
    },
		storeCommonCatChange: function(e) {
        this.setData({
            store_common_cat_index: e.detail.value
        });
    },
    applySubmit: function(e) {
        var t = this;
        !t.data.entry_rules || t.data.agree_entry_rules ? (myVue.getApp.core.showLoading({
            title: "正在提交",
            mask: !0
        }), 0 === t.data.store_common_cat_index && (t.data.store_common_cat_index = "0"), myVue.getApp.request({
            url: myVue.getApp.api.store.apply_submit,
            method: "post",
            data: {
                realname: e.detail.value.realname,
                tel: e.detail.value.tel,
                name: e.detail.value.name,
                province_id: e.detail.value.province_id,
                city_id: e.detail.value.city_id,
                district_id: e.detail.value.district_id,
                address: e.detail.value.address,
                store_common_cat_id: t.data.store_common_cat_index ? t.data.store_common_cat_list[t.data.store_common_cat_index].id : t.data.apply && t.data.apply.store_common_cat_id ? t.data.apply.store_common_cat_id : "",
                service_tel: e.detail.value.service_tel,
                form_id: e.detail.formId,
                wechat_name: e.detail.value.wechat_name
            },
            success: function(e) {
                myVue.getApp.core.hideLoading(), 0 == e.code && myVue.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1,
                    success: function(e) {
                        e.confirm && myVue.getApp.core.redirectTo({
                            url: "/store/apply/apply"
                        });
                    }
                }), 1 == e.code && t.showToast({
                    title: e.msg
                });
            }
        })) : myVue.getApp.core.showModal({
            title: "提示",
            content: "请先阅读并同意《入驻协议》。",
            showCancel: !1
        });
    },
    hideApplyResult: function() {
        this.setData({
            show_result: !1,
            is_form_show: !0
        });
    },
    showApplyResult: function() {
        this.setData({
            show_result: !0
        });
    },
    showEntryRules: function() {
        this.setData({
            show_entry_rules: !0
        });
    },
    disagreeEntryRules: function() {
        this.setData({
            agree_entry_rules: !1,
            show_entry_rules: !1
        });
    },
    agreeEntryRules: function() {
        this.setData({
            agree_entry_rules: !0,
            show_entry_rules: !1
        });
    }
		}
	}
</script>

<style scoped>
	.block-button {
		display: block;
		padding: 0;
		margin: 0;
		font-size: inherit;
		line-height: inherit;
		background: none;
	}

	.block-button:after {
		display: none;
	}

	.placeholder {
		color: #aaa;
	}

	.form-group-name {
		color: #888;
		padding: 32upx 0 8upx 32upx;
	}

	.input-group {
		background: #fff;
		height: 100upx;
		position: relative;
	}

	.input-group .input-group-label {
		padding: 0 32upx;
		line-height: inherit;
		min-width: 200upx;
		white-space: nowrap;
	}

	.input-group picker,
	.input-group input {
		height: 100%;
		width: 100%;
		padding: 0 32upx;
		font-size: inherit;
		line-height: inherit;
	}

	.input-group-list {
		border-top: 1upx solid #e9e9e9;
		border-bottom: 1upx solid #e9e9e9;
	}

	.input-group-list .input-group:after {
		display: block;
		content: " ";
		height: 0;
		border-bottom: 1upx solid #eee;
		position: absolute;
		bottom: 0;
		left: 32upx;
		right: 32upx;
	}

	.input-group-list .input-group:last-child:after {
		display: none;
	}

	.submit-btn {
		background: #ff4544;
		border-radius: 8upx;
		color: #fff;
		margin: 64upx 32upx;
	}

	.apply-result {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		z-index: 10;
		transition: 200ms;
		visibility: hidden;
		opacity: 0;
		text-align: center;
		padding: 150upx 95upx;
	}

	.apply-result.show {
		visibility: visible;
		opacity: 1;
	}

	.apply-result .review-status {
		margin-bottom: 12upx;
		font-size: 13pt;
	}

	.apply-result .status-0 {}

	.apply-result .status-1 {
		color: #1aa349;
	}

	.apply-result .status-2 {}

	.apply-result .review-result {
		margin-bottom: 64upx;
	}

	.view-data-btn {
		color: #387ee8;
	}

	.entry-rules {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		z-index: 10;
		padding: 50upx;
	}

	.rules-container {
		background: #fff;
		border-radius: 8upx;
		overflow: hidden;
	}

	.rules-container text {
		max-width: 100%;
	}

	.rules-container .rules-btn {
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		border-top: 1upx solid #e3e3e3;
		border-right: 1upx solid #e3e3e3;
	}

	.rules-container .rules-btn:last-child {
		border-right: none;
	}
</style>
